<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Web Storage</title>
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/x-icon" href="http://flyxiang.org/www/img/favicon.ico">
    <link rel="apple-touch-icon" href="http://flyxiang.org/www/img/flyxiang_57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="http://flyxiang.org/www/img/flyxiang_72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="http://flyxiang.org/www/img/flyxiang_114.png">
    <link href="../www/css/basic.css" rel="stylesheet" media="all" >
    <style>
    	html,body {
    		width: 100%;
    	}
            body {
            font-family: 'Open Sans',sans-serif;
            color:#333;
            background:#EDEDED;
            -webkit-text-size-adjust: none;
        }
        /*Custom text-selection colors*/
        ::-moz-selection {background: #F04530; color: #fff; text-shadow: none;}
        ::selection {background: #F04530; color: #fff; text-shadow: none;} 
        a {
            color:#346AA8;
            text-decoration:none;
        }

        a:hover,
        a:focus,
        a:active {
            text-decoration:none;
        }
        h1 {
            text-align: center;
        }
        h1 a {
            font-size: 30px;
            font-weight: 400;
            text-decoration: none;
            color: #5FA4A0
        }
        h1 a:hover {
            color: #5FA4A0
        }

        
        .container {
            position:relative;
            z-index:1;
            width: 37.5em;
            padding: 2.5em;
            margin:0 auto;
            background:#EDEDED;
        }


        .container:after {
            content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
            font-size:0;
        }

        .storage {
        	width: 37.5em;
        }
        .storage h1 {
        	margin-bottom: 1.2em;
        }
        .storage p {
        	margin-bottom: 1em;
        }
        #textarea {
        	width: 100%;
        	height: 6em;
        	border: #737C81 1px solid;
        	font-size: 1.2em;
        }
        #saveBtn {
        	background-color: #737C81;
        	color: white;
        	border: none;
        	padding: 5px 10px;
        }
        #saveBtn:hover {
        	background-color: #4b575d;
        }
        footer {
            padding: 0 2em;
            font-size: 10px;
        }
    </style>
</head>
<body>
<article class="container">
	<div class="storage">
		<h1><a href="http://www.flyxiang.org">Web Storage / 本地存储</a></h1>
		<p><textarea id="textarea"></textarea></p>
		<p><button id="saveBtn">Save</button></p>
	</div>
</article>
<footer>&copy;<a href="http://flyxiang.org">flyxiang.org</a></footer>
<script>
function getId(tag) {
	return document.querySelector(tag);
}
var save = getId('#saveBtn'),
textarea = getId('#textarea');
saveBtn.addEventListener('click', function () {
  window.localStorage.setItem('value', textarea.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28937623-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>